<template>
    <view 
	  :class="[
		  'goods', 
		  {'goods--square': shape === 'square'}, 
		  {'goods--rectangle': shape === 'rectangle'}
	  ]"
	  :style="[containStyle]"
	>
        <!-- 商品图片 -->
        <view class="goods-images" :style="[imageStyle]">
            <u-image
                width="100%"
                height="100%"
                :src="image"
				mode="scaleToFill"
            />
        </view>
        <!-- 商品信息 -->
        <view class="goods-content">
            <!-- 名称 -->
            <view class="goods-name line-2">
				<slot name="name">{{ name }}</slot>
			</view>
            <!-- 价格 -->
			<view class="goods-other">
				<slot>
					<price :content="price" main-size="42rpx" minor-size="36rpx" :color="themeColor" >
						<view slot="suffix">
							<price
							  class="muted sm m-l-12" 
							  :line-through="true"
							  :content="minPrice"
							  v-show="Number(minPrice)"
							/>
						</view>
					</price>
				</slot>
			</view>
        </view>
    </view>
</template>

<script>
	
	/**
	 * @description 商品卡片
	 * @property {String} shape 形状：square-正方形; rectangle-长方形 (默认: square)
	 * @property {String} image 商品图片
	 * @property {String} name 商品名称
	 * @property {String|Number} price 商品价格
	 * @property {String|Number|Boolean} minPrice 商品划线价格 (默认：false)
	 * @property {String} imageStyle 图片样式
	 * @property {String} containStyle 卡片样式
	 * @example <goods-card shape="rectangle" name="Muze" price="100" minPrice="120" />
	 */
	
	export default {
		name: 'GoodsCard',

		props: {
			// square -正方形 | rectangle -长方形
			shape: {
				type: String,
				default: 'square',
			},
			// 商品图片
			image: {
				type: String,
				default: '',
			},
			// 商品名称
			name: {
				type: String,
				default: '',
			},
			// 价格
			price: {
				type: [String, Number],
				default: 0,
			},
			// 划线价
			minPrice: {
				type: [String, Number, Boolean],
				default: false,
			},
			
			// 卡片样式
			containStyle: {
				type: Object,
				default: () => {},
			},
			
			// 图片样式
			imageStyle: {
				type: Object,
				default: () => {},
			},
		},	
	}
</script>

<style lang="scss" scoped>
.goods {
    display: flex;
	border-radius: 7px;
	background-color: #FFFFFF;
    overflow: hidden;

    &--square {
        flex-direction: column;
        width: 347rpx;
        height: 510rpx;

        .goods-images {
            width: 345rpx;
            height: 345rpx;
        }
		
		.goods-content {
			padding: 14rpx;
		}
    }

    &--rectangle {
        flex-direction: row;
        align-items: center;
        height: 250rpx;
		padding: 20rpx;

        .goods-images {
            box-sizing: border-box;
            width: calc(250rpx - 2 * 20rpx);
            height: calc(250rpx - 2 * 20rpx);
            border-radius: 7px;
            overflow: hidden;
        }
		
		.goods-content {
			margin-left: 20rpx;
		}
    }

    &-content {
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
		
		.goods-other {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}
    }
}

.goods-name {
    font-size: $-font-size-nr;
    color: #333333;
	overflow: hidden;
}
</style>
